<template>
    <label class="el-radio"
        :class="[
            { 'is-checked': model === label },
            { 'is-disabled': disabled },
            { 'is-bordered': border },
        ]"
    >
        <span class="el-radio__input"
        :class="{
            'is-checked': model === label,
            'is-disabled': disabled,
        }"
        >
            <span class="el-radio__inner"></span>
            <input
                ref="radio"
                type="radio"
                class="el-radio__original"
                :value="label"
                v-model="model"
                :disabled="disabled"
                @change="handleChange"
            >
        </span>
        <span class="el-radio__label" @keydown.stop>
          <slot></slot>
          <template v-if="!$slots.default">{{label}}</template>
        </span>
    </label>
</template>


<script>
import Emitter from '../../mixins/emitter'
export default {
    name: 'ElRadio',
    mixins: [Emitter],
    props: {
      value: {},
      label: {},
      disabled: Boolean,
      border: Boolean,
    },
    computed: {
        model: {
            get() {
                return this.isGroup() ? this._radioGroup.value : this.value;
            },
            set(val) {
                if (this.isGroup()) {
                  this.dispatch('ElRadioGroup', 'input', [val]);
                } else {
                  this.$emit('input', val);
                }
                this.$refs.radio && (this.$refs.radio.checked = this.model === this.label);
            }
        },
        
    },

    methods: {
      handleChange() {
        this.$nextTick(() => {
          this.$emit('change', this.model);
        });
      },
      isGroup() {
          let parent = this.$parent;
        while (parent) {
          if (parent.$options.componentName !== 'ElRadioGroup') {
            parent = parent.$parent;
          } else {
            this._radioGroup = parent;
            return true;
          }
        }
        return false;
      },
    }
}
</script>